<template>
  <view class="make">
      <view class="list">
        <!--这里循环生成水印文字-->
          <view class="item" v-for="i in 200">
              <text>{{ info }}</text>
          </view>
      </view>
  </view>
</template>

<script setup>
const props = defineProps({
    info: {
        type: String,
        default: ''
    }
})
</script>
<style lang="scss" scoped>
  .make {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      background: #17171a;
      // background: rgba(0, 0, 0, 0);
      pointer-events: none;

      .list {
          width: 500%;
          height: 400%;
          position: absolute;
          top: -50%;
          left: -50%;
          transform: rotate(-45deg);//旋转水印
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          pointer-events: none;

          .item {
              font-size: 12px;
              color: rgba(220, 220, 220, 0.3);
              font-weight: 400;
              padding: 36px;
              pointer-events: none;//这句很关键，让事件穿透
          }
      }
  }
</style>
